<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
	@import "@/uni_modules/uview-ui/libs/css/flex.scss";
	@import "@/libs/main.scss";

	page {
		background-color: transparent;
		color: #ffffff;
		font-family: 'PingFang-SC';
	}
	.tab-icon {
		width: 60rpx !important;
		height: 60rpx !important; /* 保持原始宽高比 */
	}
	.fullscreen-bg{
		overflow: auto;
		box-sizing: border-box;
		padding-bottom: 180rpx;
	}
	.footer-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 62px;
		/* line-height: 86px; */
		z-index: 1 !important;
		padding-top: 26px;
		display: flex;
		background-color: #212437;
		color: red;
		justify-content: space-around;
		padding-left: 16px;
		padding-right: 16px
	}
.popupFooter{
		position: fixed;
		bottom: 60rpx;
		left: 60rpx;
		z-index: 9999;
		display: flex;
		
	}
	.popupFooter img{
		width: 60rpx;
		margin-right: 15rpx;
	}
	@layer utilities {
	            .btn-gradient {
	                background: linear-gradient(135deg, #2563eb, #a855f7);
	            }
	            .btn-active {
	                transform: scale(0.95);
	            }
	        }
</style>
<style>
/* 基础样式 */
.btn-gradient {
  background: linear-gradient(135deg, #8a2be2 0%, #4b00ff 50%, #00b7ff 100%);
  background-size: 200% 200%;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 按住状态动画 */
.btn-gradient:active {
  animation: 
    gradientPress 0.5s ease forwards,
    borderPulse 1s ease infinite;
}

/* 按住时图标动画 */
.btn-gradient:active i {
  animation: iconPress 0.4s ease both;
}

/* 自定义按住效果 */
.btn-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-gradient:active::before {
  opacity: 1;
}

/* 关键帧动画 */
@keyframes gradientPress {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(138,43,226,0);
  }
  50% {
    transform: scale(0.95);
    box-shadow: 0 0 20px rgba(138,43,226,0.4);
  }
  100% {
    transform: scale(0.98);
    box-shadow: 0 0 15px rgba(138,43,226,0.3);
  }
}

@keyframes borderPulse {
  0% {
    outline: 2px solid rgba(138,43,226,0);
    outline-offset: 0;
  }
  50% {
    outline: 2px solid rgba(138,43,226,0.8);
    outline-offset: 4px;
  }
  100% {
    outline: 2px solid rgba(138,43,226,0);
    outline-offset: 8px;
  }
}

@keyframes iconPress {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.2);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
	.tab-item .btnPostion {
		/* 选中第三个 Tab（中间的 add 图标） */
		/* 放大宽度 */
		/* 放大高度 */
		position: relative;
		top: -34rpx;
	}
</style>